<script setup lang="ts">
import Provider from '@/components/Provider.vue'
import Header from '@/components/Header.vue'
import Footer from './components/Footer.vue'
import { useMainDataStore } from './store/mainData'
const mainData = useMainDataStore()
</script>

<template>
  <!-- 要定义好整个最宽的地方, 一般都是 1800px , 也大概是 max-w-screen-2xl
          此处的架构是 头部+内容+底部, 所以项目中有三个 1800px 
  -->

  <Provider>
    <n-layout class="h-full" embedded :native-scrollbar="false">
      <!-- 头部 -->
      <Header></Header>

      <!-- 内容 -->
      <main class="main">
        <!-- VueRouter 官方推荐的写法 -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <transition name="scale" mode="out-in">
              <component :is="Component"></component>
            </transition>
          </keep-alive>
        </router-view>
      </main>
      <!-- 底部 -->
      <Footer></Footer>
    </n-layout>
  </Provider>
</template>

<style lang="scss" scoped>
.n-layout {
  height: 100%;

  main {
    max-width: 1800px;
    min-height: calc(100vh - 238px);
    padding: 0 5vw;
    margin: 0 auto;
  }
}

// 路由跳转动画
.scale-enter-active,
.scale-leave-active {
  transition: all 0.2s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.98);
}
</style>
